import { defineStore } from "pinia";
import { map, navi, poi } from "@/store";
import blueDotImg from "@/assets/img/blue-dot.png";
import { PositionInfo } from "@/utils/type";
import redDotImg from "@/assets/img/red-dot.png";
import greenDotImg from "@/assets/img/green-dot.png";

export let locationMarker; //不能为代理对象，threejs报错
export let recordLocationMarker;

const useMarkerStore = defineStore("marker", {
  state: () => ({
    moveLocationMarkerFlag: false,
    markerList: [] as any,
  }),
  getters: {},
  actions: {
    setLocationMarker(poi: PositionInfo) {
      // 地图添加蓝色定位marker——当前位置
      if (!navi.localPositionFlag) {
        const { x, y, floorId } = poi;
        // @ts-ignore
        locationMarker = new fengmap.FMLocationMarker({
          x: x,
          y: y,
          url: blueDotImg,
          size: 30,
          level: floorId,
        });
        console.log("locationMarker", locationMarker);
        locationMarker.addTo(map.fmap);
        navi.localPositionFlag = true;
      }
      console.log("添加当前位置marker");

      // 设置地图中心点，使地图视角中心移动到当前位置
      map.setMapCenter(poi);
    },
    setStart() {
      this.removeLocationMarker();
      let start = {
        x: poi.start.coordinateX,
        y: poi.start.coordinateY,
        floorId: poi.start.floorId,
        level: poi.start.floorId,
      } as PositionInfo;
      this.setImageMarker(start, false, greenDotImg);
    },
    setEnd() {
      let end = {
        x: poi.end.coordinateX,
        y: poi.end.coordinateY,
        floorId: poi.end.floorId,
        level: poi.end.floorId,
      } as PositionInfo;
      this.setImageMarker(end, false, redDotImg);
    },
    updateLocationMakerPosition(
      coord: { level: any; x: any; y: any },
      angle: number
    ) {
      if (angle && !map.angleFlag) {
        map.angleFlag = true;
        // 第一人称需旋转地图角度
        map.fmap.setRotation({
          rotation: angle,
          animate: true,
          duration: 0.1,
          finish: () => {
            map.angleFlag = false;
          },
        });
      }
      // 更新locationMarker定位楼层
      var level = locationMarker.level;
      if (level !== coord.level) {
        map.fmap.setLevel({
          animate: true,
          level: coord.level,
        });
      }
      //移动locationMarker
      let data = {
        x: coord.x,
        y: coord.y,
        level: coord.level,
        animate: true,
        duration: 0.3,
        // finish: function () {
        //   console.log("动画完成回调！");
        // },
      };

      //移动locationMarker
      locationMarker.moveTo(data);
    },
    removeLocationMarker() {
      locationMarker?.remove();
      locationMarker = undefined;
      navi.localPositionFlag = false;
    },
    moveLocationMarker(poi: PositionInfo) {
      if (!this.moveLocationMarkerFlag) {
        this.moveLocationMarkerFlag = true;
        const { x, y, floorId } = poi;
        locationMarker.moveTo({
          x: x,
          y: y,
          level: floorId,
          animate: true,
          duration: 0.2,
          finish: () => {
            this.moveLocationMarkerFlag = false;
          },
        });
        console.log("移动坐标", poi, this.moveLocationMarkerFlag);
      }
    },
    setImageMarker(poi: PositionInfo, centerFlag = true, img = redDotImg) {
      // @ts-ignore
      let marker = new fengmap.FMImageMarker({
        url: img,
        // @ts-ignore
        anchor: fengmap.FMMarkerAnchor.BOTTOM,
        size: 22,
        x: poi.x,
        y: poi.y,
      });
      this.markerList.push(marker);
      let floor = map.fmap.getFloor(poi.floorId);
      marker.addTo(floor);
      if (centerFlag) {
        map.setMapCenter(poi);
      }
    },
    removeImageMarker() {
      this.markerList.forEach((item: any) => {
        item.remove();
      });
    },
  },
});

export default useMarkerStore();
